<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="comboBoxBase" interface="iComboBox" src="../comboBoxBase.xml"/>

		<d:element name="comboBox" extends="b:comboBoxBase" implements="b:iComboBox">
			

			<d:resource type="text/css"><![CDATA[.btl-comboBox {
	display: inline-block;
	vertical-align: bottom;
	background-color: #FFFFFF;
	width: 135px;
}
.btl-comboBox-border {
	position: relative;
	padding: 0 17px 0 0;
}
.btl-comboBox .btl-focusIndicator {
	padding: 1px 1px 1px 3px;
}
.btl-comboBox .btl-focusIndicator-visible {
	padding: 0 0 0 2px;
}
.btl-comboBox-input {
	width: 100%;
	border-style: none;
	border-color: Window;
	padding: 0;
}
.btl-comboBox-readonly * {
	cursor: pointer;
}
.btl-comboBox-button {
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	background-color: ThreeDFace;
}
.btl-comboBox-button-inner2 {
	width: 10px;
}
.btl-comboBox-arrow {
	position: absolute;
	top: 44%;
	left: 3px;
	width: 6px;
	height: 4px;
	overflow: hidden;
}
.btl-comboBox-arrow-line {
	background-color: ButtonText;
	height: 1px;
	overflow: hidden;
	position: absolute;
}
.btl-comboBox-arrow-line5 {
	width: 5px;
	top: 0;
	left: 0;
}
.btl-comboBox-arrow-line3 {
	width: 3px;
	top: 1px;
	left: 1px;
}
.btl-comboBox-arrow-line1 {
	width: 1px;
	top: 2px;
	left: 2px;
}
.btl-comboBox-active .btl-comboBox-arrow-line5 {
	top: 1px;
	left: 1px;
}
.btl-comboBox-active .btl-comboBox-arrow-line3 {
	top: 2px;
	left: 2px;
}
.btl-comboBox-active .btl-comboBox-arrow-line1 {
	top: 3px;
	left: 3px;
}
.btl-disabled .btl-comboBox-arrow-line {
	background-color: GrayText;
}
.btl-disabled .btl-comboBox-input {
	color: GrayText;
}
.btl-comboBox-dropDown {
	background-color: Window;
	overflow-y: auto;
	overflow-x: hidden;
	cursor: pointer;
	text-align: left;
}
.btl-comboBoxOption-td {
	padding: 2px 16px 2px 2px;
}
.btl-comboBoxOption-highlight {
	background-color: Highlight;
	color: HighlightText !important;
}
/* fixes */
.btl-comboBox-dropDown,
.btl-comboBox-dropDown * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}
.gecko .btl-comboBox {
	display: -moz-inline-grid;
}
.ie .btl-comboBox {
	overflow: hidden;
	display: inline;
}
.opera .btl-comboBox-border,
.ie .btl-comboBox-border {
	padding-right: 14px;
}
.btl-comboBox-dropDown {
	/* Initially set the height of the dropDown to 1px to avoid that really large lists
	   of options cause the page to jump */
	height: 1px;
}
.opera .btl-comboBox-dropDown,
.gecko1_7 .btl-comboBox-dropDown {
	overflow: auto;
}
.ie .btl-comboBox-input {
	margin: -1px 0;
}
.ie .btl-comboBox-button {
	top: 1px;
}
.opera .btl-comboBox-button,
.opera .btl-comboBox-button-inner,
.opera .btl-comboBox-button-inner2,
.gecko .btl-comboBox-button,
.gecko .btl-comboBox-button-inner,
.gecko .btl-comboBox-button-inner2 {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	height: 100%;
	overflow: hidden;
}]]></d:resource>

			<d:resource type="text/javascript"><![CDATA[
				btl.comboBox = {};

				btl.comboBox.dropDown = {};

				btl.comboBox.dropDown.setSize = function btl_comboBox_dropDown_setSize(oComboBox, oDropDown){
					if( !oDropDown.getElementsByTagName('tr')[0] )
						oDropDown.style.height = '15px';
					else
						oDropDown.style.height = oDropDown.scrollHeight > 250 ? 250 + 'px' : 'auto';

					oDropDown.style.width = oComboBox.viewNode.offsetWidth + 'px';

					// also set the width of the table to prevent it from collapsing when filtering
					oDropDown.firstChild.style.width = oComboBox.viewNode.offsetWidth + 'px';
				};

				btl.comboBox.IEFocusFix = {};

				btl.comboBox.IEFocusFix.handleMouseDown = function btl_comboBox_IEFocusFix_handleMouseDown() {
					bb.getControllerFromView(this).__mouseDown = true;
				};

				btl.comboBox.IEFocusFix.handleActivate = function btl_comboBox_IEFocusFix_handleActivate() {
					var oComboBox = bb.getControllerFromView(this);
					var oInput = bb.selector.query(oComboBox.viewNode, '.btl-comboBox-input');
					if (!oInput.disabled) {
						oInput.focus();
					}
				};

				btl.comboBox.IEFocusFix.handleBeforeDeactivate = function btl_comboBox_IEFocusFix_handleBeforeDeactivate() {
					return !bb.getControllerFromView(this).__mouseDown;
				};
			]]></d:resource>

			<d:template type="application/xhtml+xml">
				<div class="btl-comboBox btl-groove">
					<div class="btl-comboBox-border btl-groove-inner">
						<div class="btl-focusIndicator">
							<input type="text" class="btl-comboBox-input"/>
						</div>
						<input type="text" style="display:none;"/>
						<div class="btl-comboBox-button btl-ridge">
							<div class="btl-comboBox-button-inner btl-ridge-inner">
								<div class="btl-comboBox-button-inner2"> </div>
								<div class="btl-comboBox-arrow">
									<div class="btl-comboBox-arrow-line btl-comboBox-arrow-line5"/>
									<div class="btl-comboBox-arrow-line btl-comboBox-arrow-line3"/>
									<div class="btl-comboBox-arrow-line btl-comboBox-arrow-line1"/>
								</div>
							</div>
						</div>
					</div>
					<div class="btl-comboBox-dropDown btl-bevel">
						<table cellpadding="0" cellspacing="0" border="0">
							<tbody><d:content/></tbody>
						</table>
					</div>
				</div>
			</d:template>

			<d:attribute name="name" onmap="this.viewNode.getElementsByTagName('input')[1].name = value"/>

			<d:attribute name="opacity">
				<d:mapper type="text/javascript"><![CDATA[
					bb.html.setStyle(this.viewNode, name, value);
					var oDropdown;
					if (oDropdown = this.getProperty('dropDownElement'))
						bb.html.setStyle(oDropdown, name, value);
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="readonly">
				<d:mapper type="text/javascript"><![CDATA[
					var oInput = this.viewNode.getElementsByTagName('input')[0];
					if (btl.isTrueValue(name, value)) {
						oInput.readOnly = true;
						bb.html.disableUserSelect(this.viewNode); /* To prevent content from being selected each time the element was focused */
						bb.html.addClass(this.viewNode, 'btl-comboBox-readonly');
					} else {
						oInput.readOnly = false;
						bb.html.enableUserSelect(this.viewNode); /* Undo in case selection was prevented */
						bb.html.removeClass(this.viewNode, 'btl-comboBox-readonly');
					}
				]]></d:mapper>
			</d:attribute>

			<d:method name="setHighlight">
				
				<d:argument name="highlightIndex"/>
				<d:body type="text/javascript"><![CDATA[
					bb.html.addClass(this.viewGate.rows[highlightIndex], ['btl-comboBoxOption-highlight']);
				]]></d:body>
			</d:method>

			<d:method name="removeHighlight">
				
				<d:argument name="highlightIndex"/>
				<d:body type="text/javascript"><![CDATA[
					bb.html.removeClass(this.viewGate.rows[highlightIndex], ['btl-comboBoxOption-highlight']);
				]]></d:body>
			</d:method>

			<d:method name="open">
				
				<d:body type="text/javascript"><![CDATA[
					btl.comboBox.dropDown.setSize(this, this.getProperty('dropDownElement'));
					var iSelectedIndex = this.getProperty('selectedIndex');
					this.callSuper('open');
					if (iSelectedIndex > -1)
						bb.html.scrollIntoView(this.viewGate.rows[iSelectedIndex]);
				]]></d:body>
			</d:method><!-- scrollIntoView *after* open to fix bug 6983 -->

			<d:method name="filter">
				<d:body type="text/javascript"><![CDATA[
					this.callSuper('filter');
					var oDropDown = this.getProperty('dropDownElement');
					btl.comboBox.dropDown.setSize(this, oDropDown);
					if(this.getProperty('open'))
						bb.html.position(oDropDown, this.viewNode, 'after-start');
				]]></d:body>
			</d:method>

			<d:method name="getValue">
				
				<d:body type="text/javascript"><![CDATA[
					return this.viewNode.getElementsByTagName('input')[1].value;
				]]></d:body>
			</d:method>

			<d:method name="setValue">
				
				<d:argument name="value"/>
				<d:body type="text/javascript"><![CDATA[
					this.viewNode.getElementsByTagName('input')[1].value = value;
				]]></d:body>
			</d:method>

			<d:method name="getLabel">
				
				<d:body type="text/javascript"><![CDATA[
					return this.viewNode.getElementsByTagName('input')[0].value;
				]]></d:body>
			</d:method>

			<d:method name="setLabel">
				
				<d:argument name="label"/>
				<d:body type="text/javascript"><![CDATA[
					this.viewNode.getElementsByTagName('input')[0].value = label;
				]]></d:body>
			</d:method>

			<d:method name="disableView">
				<d:body type="text/javascript"><![CDATA[
					this.callSuper('disableView');
					this.viewNode.getElementsByTagName('input')[1].disabled = true;
				]]></d:body>
			</d:method>

			<d:method name="enableView">
				<d:body type="text/javascript"><![CDATA[
					this.callSuper('enableView');
					this.viewNode.getElementsByTagName('input')[1].disabled = false;
				]]></d:body>
			</d:method>

			<d:constructor type="text/javascript"><![CDATA[
				this.setProperty('dropDownElement', this.viewNode.lastChild);
				this.callSuper('__constructor');

				/* fixes for IE to keep focus inside the input */
				if (bb.browser.ie) {
					var oInput = bb.selector.query(this.viewNode, '.btl-comboBox-input');
					oInput.onbeforedeactivate = btl.comboBox.IEFocusFix.handleBeforeDeactivate;
					var oButton = bb.selector.query(this.viewNode, '.btl-comboBox-button');
					oButton.onactivate = btl.comboBox.IEFocusFix.handleActivate;
					var oDropDown = this.getProperty('dropDownElement');
					oDropDown.onactivate = btl.comboBox.IEFocusFix.handleActivate;
				}

				var oDropDown = this.getProperty('dropDownElement');

				// in IE this prevents the dropdown from closing on mousedown of the dropDownElement
				// in other browsers this helps the dropdown to close on mouseup of an option
				// TODO: refactor because it is not transparent
				oDropDown.firstChild.onmousedown = btl.comboBox.IEFocusFix.handleMouseDown

				// TODO: add comment why this is here
				oDropDown.tabIndex = -1;
			]]></d:constructor>

			<d:handler event="DOMNodeInsertedIntoDocument" type="text/javascript"><![CDATA[
				var oDropDown = this.getProperty('dropDownElement');

				//disable userselect on dropdown
				bb.html.disableUserSelect(oDropDown);
				// disable userselect on button
				bb.html.disableUserSelect(bb.selector.query(this.viewNode,'div.btl-comboBox-button'));

				var oTable = oDropDown.getElementsByTagName('table')[0];
				var oInput = this.viewNode.getElementsByTagName('input')[0];
				var sFontFamily = bb.html.getStyle(oInput, 'font-family');
				oTable.style.fontFamily = sFontFamily;

				if (!this.viewNode.style.width) {
					// size according to dropDown element size (and add a few pixels for buffer)
					var width = oDropDown.offsetWidth > oDropDown.scrollWidth ? oDropDown.offsetWidth : oDropDown.scrollWidth;

					if( oDropDown.scrollWidth)
						this.viewNode.style.width = oDropDown.scrollWidth + 20 + 'px';

					//if no option and the control is not readonly - give it some width to enter value
					else if ( !this.getProperty('readOnly') )
						this.viewNode.style.width = 80 + 'px';
				}

				if(!this.hasAttribute('width'))
					this.viewNode.style.width = oDropDown.offsetWidth + 7 + 'px';
			]]></d:handler>

			<d:handler event="mousedown" type="text/javascript"><![CDATA[
				if (this.getProperty('readOnly') && !bb.selector.queryAncestor(event.viewTarget, '.btl-comboBox-dropDown', this.viewNode))
					bb.html.addClass(this.viewNode, 'btl-comboBox-active');
			]]></d:handler>

			<d:handler event="mouseup" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, 'btl-comboBox-active');
			]]></d:handler>

			<d:handler event="mouseleave" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, 'btl-comboBox-active');
			]]></d:handler>

			<d:handler event="focus" type="text/javascript"><![CDATA[
				bb.html.addClass(this.viewNode, 'btl-comboBox-focus');
			]]></d:handler>

			<d:handler event="blur" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, 'btl-comboBox-focus');
			]]></d:handler>

			<d:handler event="mousedown" match=".btl-comboBox-button" type="text/javascript"><![CDATA[
				var oButton = event.currentView;
				bb.html.addClass(oButton, ['btl-comboBox-button-press', 'btl-groove-top',
						'btl-groove-left', 'btl-ridge-inner-right', 'btl-ridge-inner-bottom']);
				bb.html.addClass(oButton.firstChild, ['btl-groove-right', 'btl-groove-bottom']);

				// @TODO: remove
				this.__mouseDown = true;
			]]></d:handler>

			<d:handler event="mouseup" match=".btl-comboBox-button" type="text/javascript"><![CDATA[
				var oButton = event.currentView;
				bb.html.removeClass(oButton, ['btl-comboBox-button-press', 'btl-groove-top',
						'btl-groove-left', 'btl-ridge-inner-right', 'btl-ridge-inner-bottom']);
				bb.html.removeClass(oButton.firstChild, ['btl-groove-right', 'btl-groove-bottom']);
			]]></d:handler>

			<d:handler event="mouseleave" match=".btl-comboBox-button" type="text/javascript"><![CDATA[
				var oButton = event.currentView;
				bb.html.removeClass(oButton, ['btl-comboBox-button-press', 'btl-groove-top',
						'btl-groove-left', 'btl-ridge-inner-right', 'btl-ridge-inner-bottom']);
				bb.html.removeClass(oButton.firstChild, ['btl-groove-right', 'btl-groove-bottom']);
			]]></d:handler>
		</d:element>

		<d:element name="comboBoxOption" extends="b:comboBoxOptionBase">
			

			<d:template type="application/xhtml+xml">
				<tr>
					<td class="btl-comboBoxOption-td"><d:content/></td>
				</tr>
			</d:template>

			<d:property name="filtered">
				<d:setter type="text/javascript"><![CDATA[
					value = Boolean(value);
					if (value != this._._filtered) {
					if (value) {
						this.viewNode.style.display = 'none';
					} else {
						this.viewNode.style.display = '';
					}
					this._._filtered = value;
					}
				]]></d:setter>
			</d:property>

			<d:handler event="mouseenter" type="text/javascript"><![CDATA[
				var iIndex = 0;
				var oPrevious = this;
				while(oPrevious = oPrevious.getProperty('previousSibling')){
					if(bb.instanceOf(oPrevious, btl.namespaceURI, 'comboBoxOption'))
						iIndex++;
				}

				var oComboBox = this.getProperty('parentNode');
				oComboBox.setProperty('highlightIndex', iIndex);
			]]></d:handler>
		</d:element>
	</d:namespace>
</d:tdl>